import React from 'react';
import {
  Form,
  Input,
  Button,
  Space,
  Select,
  Tooltip,
  Row,
  Col,
  DatePicker,
} from 'antd';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { adminCompanyType } from '@/utils/constant';
import { formatDateTimeStamp } from '@/utils/utils';

const Search = (props: any) => {
  const [form] = Form.useForm();
  const { callbackValue, loading } = props;
  const onReset = () => {
    form.resetFields();
    callbackValue({});
  };
  const onFinish = (values: any) => {
    if (values.time) {
      values['startTime'] = formatDateTimeStamp(values.time[0], 'start');
      values['endTime'] = formatDateTimeStamp(values.time[1], 'end');
    }
    delete values.time;
    callbackValue(values);
  };
  return (
    <Form
      style={{ display: 'flex', flex: 1, flexWrap: 'wrap' }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >
      <Form.Item name="company" style={{ marginBottom: 8, width: 150 }}>
        <Select
          allowClear
          placeholder={'请选择分公司'}
          style={{ width: '100%' }}
        >
          {adminCompanyType.map(item => (
            <Select.Option key={item.value} value={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="materialType" style={{ margin: 0, width: 150 }}>
        <Select allowClear placeholder={'请选择分类'} style={{ width: '100%' }}>
          <Select.Option value={'原料'}>原料</Select.Option>
          <Select.Option value={'边料'}>边料</Select.Option>
          <Select.Option value={'配件'}>配件</Select.Option>
          <Select.Option value={'化工'}>化工</Select.Option>
        </Select>
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="supplier" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入供应商'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="paymentCompany" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入付款公司'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="productName" style={{ marginBottom: 8, width: 150 }}>
        <Input placeholder={'请输入品名'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="model" style={{ margin: 0, width: 150 }}>
        <Input placeholder={'请输入型号'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="time" style={{ marginBottom: 10, width: 250 }}>
        <DatePicker.RangePicker
          style={{ width: 250 }}
          placeholder={['开始时间', '结束时间']}
        />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item style={{ margin: 0, width: 150 }}>
        <Tooltip title="搜索">
          <Button
            disabled={loading}
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
          />
        </Tooltip>
        <span style={{ padding: 4 }} />
        <Tooltip title="重置">
          <Button
            htmlType="button"
            onClick={onReset}
            icon={<ReloadOutlined />}
          />
        </Tooltip>
      </Form.Item>
    </Form>
  );
};

export default Search;
